<template>
    <view class="my-home">
        
        <view class="task-top">
            
            <view class="task-top-fixed">
                <!-- <view class="search-box">
                    <uni-icons customPrefix="iconfont" type="icon-sousuo" size="32rpx" style="font-weight:900;margin-right: 16rpx;"></uni-icons>
                    <input class="uni-input" confirm-type="search" @confirm="search()" placeholder-style="color: #999999" placeholder="输入关键词" />
                </view> -->
                <view class="ac-list">
                    <text class="ac-item" :class="{active: activeInx==inx}" v-for="(ac, inx) in activeList" :key="inx" @click="changeTab(inx)">{{ac}}</text>
                </view>
				<view class="task-top-line"></view>
            </view>
        </view>
		<view class="content-box">
			<view class="scroll-y">
				<view class="" v-show="activeInx==0">
					<swiper class="swiper-banner" circular :indicator-dots="true" :autoplay="true" :interval="2000"
						:duration="500">
						<swiper-item v-for="(data, k) in monthStarData" :key="k">
							<view class="rank-item" @click="listRanking(k)">
								<image class="rank-bg" src="/static/campus/ph-bg.png" mode="aspectFill"></image>
								<view class="rank-user">
									<view>
										<text class="grade">{{k==2?'高三':k==1?'高二':'高一'}}</text>
										<text class="rank-name">每月之星</text>
									</view>
									<view class="name">
										<text v-for="(item, inx) in data" :key="inx">{{item.name}}<font v-if="inx < (data.length-1)" style="margin: 0 8rpx;">|</font></text>
									</view>
									<view class="head-box">
										<view class="" style="position: relative;margin-right: 20rpx;" v-for="(item, inx) in data" :key="inx" :style="{order: item.rank}">
											<image class="logo" :src="`/static/pm${item.rank}.png`" mode="aspectFill"></image>
											<view :class="['head', `head${item.rank}`]">
												<image :src="utils.headImage(item)" mode="aspectFill"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item v-for="(activity, k) in activityRanking" :key="`activity${k}`">
							<view class="rank-item" @click="activityRank(activity.activity_id)">
								<image class="rank-bg" src="/static/campus/ph-bg.png" mode="aspectFill"></image>
								<view class="rank-user">
									<view>
										<text class="grade">{{activity.typeName}}</text>
										<text class="rank-name">{{activity.medalName}}</text>
									</view>
									<view class="name" v-if="activity.returnActivityUserList">
										<text v-for="(item, inx) in activity.returnActivityUserList" :key="inx">{{item.name}}<font v-if="inx < (activity.returnActivityUserList.length-1)" style="margin: 0 8rpx;">|</font></text>
									</view>
									<view class="head-box" v-if="activity.returnActivityUserList">
										<view class="" style="position: relative;margin-right: 20rpx;" v-for="(item, inx) in activity.returnActivityUserList" :key="inx" :style="{order: item.rank}">
											<image class="logo" :src="`/static/pm${item.rank}.png`" mode="aspectFill"></image>
											<view :class="['head', `head${item.rank}`]">
												<image :src="utils.headImage({sex: item.sex, avatarUrl: item.pic, userType: 2})" mode="aspectFill"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="module-box module-item">
						<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="2000" duration="500">
							<swiper-item v-for="(page, pInx) in Math.ceil(moduleList.length/10)" :key="pInx">
								<view class="module-list">
									<view class="mo-item" v-for="(item, inx) in moduleList.slice(pInx*10, (pInx+1)*10)" :key="inx" :style="{order: item.num}" @click="goCurriculumModSonList(item.id, item.name)">
										<view>
											<image class="icon" :src="item.icon&&item.icon.length>5?api.xiaodeObsUrl+item.icon:`/static/campus/${item.icon}.png`" mode="widthFix"></image>
											<text>{{item.name}}</text>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="module-line"></view>
					<view class="new-active module-item" v-if="activity.id">
						<view class="na-title">
							<text>特色活动</text>
							<text class="see-more" @click="seeMoreActivity(activity.id)">查看{{userType==2?'更多':'详情'}}<uni-icons type="right" size="28rpx" color="#999"></uni-icons></text>
						</view>
						<view class="na-content" @click.stop="activityDetails(activity)">
							<view class="info">
								<image class="head" :src="evaHeadHandle(activity)" mode="aspectFill" @click.stop="utils.userDetails(activity.publisher_account_id, activity.publicUserType)"></image>
								<text>{{activity.publicUserName}}</text>
							</view>
							<view class="text">{{activity.title}}</view>
							<view class="na-time">
								<text>{{activity.update_time.split(' ')[0]}}</text>
							</view>
						</view>
					</view>
					<!-- 好课推荐 -->
					<view class="good-class-rec module-item" v-if="havaRecommend">
						<view class="na-title">
							<text>好课推荐</text>
						</view>
						<view class="rec-box" @click="gocourseDetails(recommendFirst.id)">
							<image v-if="recommendFirst.picture" class="rb-bg" :src="api.xiaodeObsUrl+recommendFirst.picture" mode="aspectFill"></image>
							<view v-else class="rb-bg">
								<image src="/static/campus/tj-bg.png" mode="widthFix"></image>
								<view class="rb-bg-box">
									<text>{{recommendFirst.name.length>=8 ? recommendFirst.name.slice(0, parseInt(recommendFirst.name.length/2)) : recommendFirst.name}}</text>
									<text v-if="recommendFirst.name.length>=8">{{recommendFirst.name.slice(parseInt(recommendFirst.name.length/2))}}</text>
								</view>
							</view>
							<view class="cont-title">
								<text class="title">{{recommendFirst.name}}</text>
								<view class="name-num">
									<text>{{recommendFirst.lecturer}}<text class="tag">{{recommendFirst.labels}}</text></text>
									<text v-if="recommendFirst.view_num>0">{{recommendFirst.view_num}}次观看</text>
								</view>
							</view>
						</view>
						<view class="course-list recommend-list">
							<view class="cou-item" v-for="recommend in recommendList.slice(1)" :key="recommend.id" @click="gocourseDetails(recommend.id)">
								<view class="cou-image" v-if="!recommend.picture">
									<image src="/static/campus/tj-bg.png" mode="aspectFill"></image>
									<view class="cou-image-title">
										<text>{{recommend.name.length>=8 ? recommend.name.slice(0, parseInt(recommend.name.length/2)) : recommend.name}}</text>
										<text v-if="recommend.name.length>=8">{{recommend.name.slice(parseInt(recommend.name.length/2))}}</text>
									</view>
								</view>
								<image v-else class="cou-image" :src="api.xiaodeObsUrl+recommend.picture" mode="aspectFill"></image>
								<view class="right">
									<view class="cou-title"><text>{{recommend.name}}</text></view>
									<text class="cou-tag" :style="{background: utils.tagBgColor(label), display: label?'inline':'none'}" v-for="(label, Linx) in labelHandle(recommend.labels)" :key="Linx">{{label}}</text>
									<view class="cou-name-num">
										<text class="teacher-name">{{recommend.lecturer}}</text>
										<text v-if="recommend.view_num>0">{{recommend.view_num}}次观看</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 精彩评价 -->
					<view class="wonderful-comments module-item" v-if="haveGoodComment">
						<view class="na-title">
							<text>精彩评价</text>
						</view>
						<view class="com-list">
							<view class="com-list-scroll" :class="{'pc-scroll': !isMobile}">
								<view class="com-item" v-for="goodComment in goodCommentList" :key="goodComment.id" @click="gocourseDetails(goodComment.curriculum_id, 2)">
									<view class="info" v-if="goodComment.u">
										<image class="head" :src="evaHeadHandle(goodComment.u)" mode="aspectFill"></image>
										<text>{{goodComment.u.name}}</text>
									</view>
									<view class="text">{{goodComment.comments}}</view>
									<view class="na-time">
										<text>来自 {{goodComment.curriculumName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 最近更新 -->
					<view class="module-item" v-if="haveNewUpdate">
						<view class="na-title">
							<text>最近更新</text>
							<text class="see-more" @click="goNewUpdateCurriculumList()">查看更多<uni-icons type="right" size="28rpx" color="#999"></uni-icons></text>
						</view>
						<view class="course-list">
							<view class="cou-item" v-for="newUpdate in newUpdateList" :key="newUpdate.id" @click="gocourseDetails(newUpdate.id)">
								<view class="cou-image" v-if="!newUpdate.picture">
									<image src="/static/campus/tj-bg.png" mode="aspectFill"></image>
									<view class="cou-image-title">
										<text>{{newUpdate.name.length>=8 ? newUpdate.name.slice(0, parseInt(newUpdate.name.length/2)) : newUpdate.name}}</text>
										<text v-if="newUpdate.name.length>=8">{{newUpdate.name.slice(parseInt(newUpdate.name.length/2))}}</text>
									</view>
								</view>
								<image class="cou-image" v-else :src="api.xiaodeObsUrl+newUpdate.picture" mode="aspectFill"></image>
								<view class="right">
									<view class="cou-title"><text>{{newUpdate.name}}</text></view>
									<text class="cou-tag" :style="{background: utils.tagBgColor(label), display: label?'inline':'none'}" v-for="(label, Linx) in labelHandle(newUpdate.labels)" :key="Linx">{{label}}</text>
									<view class="cou-name-num">
										<text class="teacher-name">{{newUpdate.lecturer}}</text>
										<text>{{utils.handleRecomTime(newUpdate.update_time)}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="module-line"></view>
				</view>
				<content-recommend v-show="activeInx == 1 || activeInx == 2" :on-show="onShow" :active-tab="activeInx" :on-reach-bottom="onReachBottom" :down-refresh="downRefresh"
				></content-recommend>
			</view>
		</view>
    </view>
</template>
<script>

import contentRecommend from './content-recommend.vue'
export default {
	components: {
		contentRecommend
	},
    data() {
        return {
			isMobile: true, // isMobile是否是手机 true是手机，false是pc
			str: '春季免费直播课程',
            tabs: ['我的校园', '每周任务', '开课'],
            activeInx: 0,
            activeList: ['乐学园地', '导师推荐', '新鲜事'],
			monthStarData: {},
			activityRanking: [], // 活动排名banner列表
            moduleList: [],
            module2List: [],
			activity: {},
			userType: '',
			havaRecommend: false,
			recommendFirst: {},
			recommendList: [],
			haveGoodComment: false,
			goodCommentList: [],
			haveNewUpdate: false,
			newUpdateList: []
		}  
    },
	props: {
		onShow: { // 监听页面执行onShow
			type: Number,
			default: 0
		},
		onReachBottom: { // 监听页面执行触发最底部
			type: Number,
			default: 0
		},
		downRefresh: { // 监听页面上拉
			type: Number,
			default: 0
		}
	},
	watch: {
		onShow(val){
			this.changeTab(this.activeInx)
		}
	},
	mounted(){
		// #ifdef H5
		if (navigator.userAgent.indexOf('Mobile') === -1) {  
			this.isMobile = false  
		}  
		// #endif
		this.changeTab(0)
	},
	methods: {
		// 标签处理
		labelHandle(str){
			if(str.indexOf(';')!=-1){
				return str.split(';')
			}
			if(str.indexOf('；')!=-1){
				return str.split('；')
			}
			
			return [str]
		},
		changeTab(inx){
			this.activeInx = inx
			if(inx==0){
				this.getMonthStar();
				this.getActivity();
				this.getCurriculumMod();
				this.getRecommend();
				this.getGoodComment();
				this.getNewUpdateCurriculum();
			}
		},
		//获取按年级统计的每月之星
		monthStar(gradeId, date){
			this.api.get('statistics/monthStar', {
				rankNum: 3,
				haveMe: false,
				gradeId: gradeId,
				date: date
			}).then(res=>{
				if(res.data.state!='ok') return
				let list = res.data.monthStar || []
				this.monthStarData[gradeId] = list.slice(0, 5)
				
			})
		},
		getMonthStar(){
			// 1.高二 2.高三 5.高一
			let date = this.utils.initDateDay(),
			curY = date.split('-')[0],
			curM = date.split('-')[1];
			let date2 = new Date(`${curY}/${curM}/01`);
			date2 = new Date(date2.setDate(date2.getDate() - 1));
			date2 = this.utils.initDateDay(date2)
			this.monthStar(5, date2)
			this.monthStar(1, date2)
			this.monthStar(2, date2)
			this.getActivityUserRankingBanner()
		},
		// 积分排行 每月之星
		listRanking(gradeId){
			uni.navigateTo({
				url: '/pages/student/list-ranking?gradeId='+gradeId
			})
		},
		// 查询某个活动的学生排名
		getActivityUserRankingBanner(){
			this.api.get('activity/getActivityUserRankingBanner').then(res => {
				if(res.data.state == 'ok'){
					let activityList = res.data.activityUserRankingBanner;
					// 获取勋章类型
					this.activityRanking = activityList.filter((val) => {
						let activityUser = val.returnActivityUserList?val.returnActivityUserList[0]:'',
						medalName = activityUser?activityUser.medal_name:''
						val.medalName = medalName;
						return activityUser?val:false
					})
				}
			})
		},
		// 活动排行
		activityRank(id){
			uni.navigateTo({
				url: '/pages/recommend/activity-rank?activityId='+id
			})
		},
		// 获取课程类型
		getCurriculumMod(){
			this.api.get('happy/getCurriculumMod').then(res=>{
				if(res.data.state!='ok') return
				let cmList = res.data.cmList
				cmList.splice(9, 0, {name: '更多', num: 10, icon: 'more', id: 0})
				this.moduleList = cmList;
			})
		},
		//特色活动
		getActivity(){
			this.api.get('activity/getActivityPage', {
				haveMe: false,
				isExamine: false,
				page: 1,
				limit: 1
			}).then(res=>{
				if(res.data.state!='ok') return
				let data = res.data.activitiePage.list[0] || {};
				this.activity = data;
				this.activity.avatarUrl = data.publicUserPic
				this.activity.userType = data.publicUserType
				this.activity.sex = data.publicUserSex
				this.userType = getApp().globalData.userInfo.user_type
			})
		},
		seeMoreActivity(id){
			if (this.userType == 1) { // 老师端点击查看更多显示，当前参与该活动的学生列表
				uni.navigateTo({
					url: `/pages/teachers/activity-student-details?id=${id}`
				})
			} else if (this.userType == 2) { // 学生端点击查看更多显示活动概览
				this.$emit('changeActive', 1)
			}
		},
		// 活动详情
		activityDetails(item){
			let userType = uni.getStorageSync('tokenObj').userType
			if(userType == 2){
				uni.navigateTo({
					url: `/pages/student/active-details?id=${item.id}`
				})
			}
			
		},
		// 获取推荐的课程
		getRecommend(){
			this.api.get('happy/getRecommend').then(res=>{
				if(res.data.state!='ok') return
				if(res.data.cmList.length == 0){
					this.havaRecommend = false;
				}else{
					this.havaRecommend = true;
					this.recommendList = res.data.cmList;
					this.recommendFirst = this.recommendList[0] || {}
				}
			})
		},
		// 获取精彩评论(前10)
		getGoodComment(){
			this.api.get('happy/getGoodComment').then(res=>{
				if(res.data.state!='ok') return
				if(res.data.ccList.length == 0){
					this.haveGoodComment = false;
				}else{
					this.haveGoodComment = true;
					this.goodCommentList = res.data.ccList;
				}
			})
		},
		// 处理评价头像
		evaHeadHandle(info){
			
			return this.utils.headImage(info)
		},
		// 获取最近更新的课程
		getNewUpdateCurriculum(){
			this.api.get('happy/getNewUpdateCurriculum', {
				page: 1,
				limit: 1
			}).then(res=>{
				if(res.data.state!='ok') return
				if(res.data.cPage.list.length == 0){
					this.haveNewUpdate = false;
				}else{
					this.haveNewUpdate = true;
					this.newUpdateList = res.data.cPage.list;
				}
			})
		},
		
		goCurriculumModSonList(id, name){
			uni.navigateTo({
				url: `/pages/recommend/course-classify?modId=${id}&name=${name}`
			})
		},
		goNewUpdateCurriculumList(id){
			uni.navigateTo({
				url: '/pages/recommend/course-list'
			})
		},
		gocourseDetails(id, tab){
			uni.navigateTo({
				url: `/pages/recommend/course-details?id=${id}&tab=${tab}`
			})
		}
	}
}
</script>
<style lang="less" scoped>
    .my-home{
        // position: relative;
        // z-index: 1;
    }
    .search-box{
		// margin: 0 32rpx;
		padding: 0 20rpx;
		height: 34px;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20rpx;
		font-size: 26rpx;

		.input{
			width: 84%;
			margin: 0 24rpx;
			font-size: 26rpx;
		}
	}
    .task-top{
		height: 76rpx;
		
	}
	.task-top-fixed{
		position: fixed;
		/* #ifdef H5 */
		top: 88rpx;
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		top: calc(88rpx + 27px);
		left: 0;
		right: 0;
		/* #endif */
		height: 90rpx;
		z-index: 1;
	}
	.task-top-line{
		height: 36rpx;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #fff;
	}
	.content-box{
		background-color: #fff;
		overflow: hidden;
		border-radius: 32rpx 32rpx 0 0;
		padding-top: 44rpx;
	}
	.module-item{
		padding: 0 32rpx;
	}
    .ac-list{
        margin-top: 43rpx;
        display: flex;
        align-items: center;
        padding: 0 32rpx;
        
    }
    .ac-item{
		width: 172rpx;
		text-align: center;
        color: #666;
        font-size: 28rpx;
        padding-bottom: 20rpx;
        &.active{
            color: #262E3F;
            font-weight: bold;
            background-image: url(~@/static/campus/line-bg.png);
            background-size: 45rpx 18rpx;
            background-repeat: no-repeat;
            background-position: center 26rpx;
        }
    }
	// 排行
    .swiper-banner{
        margin: 0 32rpx;
		height: 280rpx;
		border-radius: 20rpx;
		overflow: hidden;
    }
	.rank-item{
		position: relative;
		font-size: 0;
		.rank-bg{
			width: 100%;
			height: 280rpx;
			border-radius: 20rpx;
		}
	}
	.rank-user{
		position: absolute;
		top: 56rpx;
		left: 44rpx;
		right: 20rpx;
		font-size: 28rpx;
		.grade{
			display: inline-block;
			width: 92rpx;
			height: 50rpx;
			text-align: center;
			font-size: 32rpx;
			color: #B12424;
			font-weight: bold;
			line-height: 50rpx;
			background: #fff;
			border-radius: 10rpx 0 10rpx 10rpx;
		}
		.rank-name{
			display: inline-block;
			font-size: 48rpx;
			margin-left: 7rpx;
			color: #fff;
			font-weight: bold;
			line-height: 48rpx;
			vertical-align: top;
		}
		.name{
			width: 100%;
			margin-top: 29rpx;
			line-height: 40rpx;
			color: #fff;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	
	.head-box{
		margin-top: 30rpx;
		font-size: 0;
		display: flex;
		.logo{
			position: absolute;
			top: -11rpx;
			right: -4rpx;
			width: 22rpx;
			height: 22rpx;
		}
		.head{
			position: relative;
			width: 50rpx;
			height: 50rpx;
			background: linear-gradient(170deg, #FFC900, #FF7900);
			border-radius: 50%;
			box-sizing: border-box;
			padding: 6rpx;
			
			image{
				border-radius: 50%;
				width: 39rpx;
				height: 39rpx;
			}
			&.head2{
				background: linear-gradient(170deg, #F0F0F0, #C5C5C5);
			}
			&.head3{
				background: linear-gradient(170deg, #FAD961, #BC4A0A);
			}
		}
	}
    /deep/.uni-swiper-dots{
        .uni-swiper-dot{
			width: 6rpx;
            height: 6rpx;
            background: #fff;
            opacity: .4;
        } 
        .uni-swiper-dot-active{
           	background: #fff;
           	opacity: 1;
			width: 24rpx;
			border-radius: 3rpx;
        }
    }
    // 模块列表
    .module-box{
        margin-top: 32rpx;
        .swiper{
            height: 426rpx;
        }
        /deep/.uni-swiper-dots{
            .uni-swiper-dot{
                width: 41rpx;
                height: 6rpx;
                background: #D0D0D0;
                opacity: .4;
				border-radius: 3rpx;
            } 
            .uni-swiper-dot-active{
                background: #28C2CD;
                opacity: 1;
            }
        }
    }
    .module-list{
        
        // display: flex;
        // justify-content: space-between;
        // flex-wrap: wrap;
    }
    .mo-item{
		display: inline-block;
        width: 20%;
        &>view{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 24rpx 0;
			font-size: 26rpx;
			.icon{
				width: 88rpx;
				height: 88rpx;
				margin-bottom: 16rpx;
				border-radius: 44rpx;
			}
		}
    }
	.module-line{
		background-color: #F9F9F9;
		height: 20rpx;
	}
	// 特色活动
	.new-active{
		
	}
	.na-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 41rpx 0 17rpx;
		font-weight: bold;
		.see-more{
			color: #999999;
			font-weight: normal;
		}
	}
	.na-content{
		padding: 26rpx;
		background-color: #F5F5F5;
		border-radius: 20rpx;
		.info{
			display: flex;
			align-items: center;
		}
		.head{
			width: 44rpx;
			height: 44rpx;
			margin-right: 18rpx;
			border-radius: 22rpx;
		}
		.text{
			margin-top: 26rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.na-time{
		margin-top: 24rpx;
		font-size: 26rpx;
		color: #999999;
	}
	// 好课推荐
    .rec-box{
        position: relative;
		border-radius: 20rpx;
		overflow: hidden;
    }
    .rb-bg{
        width: 100%;
		height: 380rpx;
		position: relative;
		image{
			width: 100%;
		}
		
    }
	.rb-bg-box{
		top: 110rpx;
		position: absolute;
		width: 100%;
		z-index: 1;
		font-size: 66rpx;
		color: #fff;
		font-weight: bold;
		height: 200rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
    .cont-title{
        position: absolute;
        padding: 50rpx 24rpx 0;
        height: 127rpx;
        bottom: 0;
        right: 0;
        left: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0));
        
        color: #fff;
        font-size: 36rpx;
    }
    .name-num{
        margin-top: 8rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        .name{

        }
        .tag{
            margin-left: 20rpx;
            background: #FF6010;
            font-size: 22rpx;
            padding: 4rpx 8rpx;
            border-radius: 8rpx;
        }
    }
	.recommend-list{
		margin-top: 29rpx;
		.cou-item{
			padding-bottom: 24rpx;
			&:last-child{
				padding-bottom: 0;
				margin-bottom: 10rpx;
			}
		}
	}
	.course-list{
		
		overflow: hidden;
	}
	.cou-item{
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 24rpx;
		&:last-child{
			border-bottom: none;
		}
		image{
			
			width: 216rpx;
			height: 136rpx;
		}
		.right{
			width: calc(100% - 240rpx);
		}
	}
	.cou-image{
		position: relative;
		margin-right: 24rpx;
		border-radius: 20rpx;
		overflow: hidden;
		image{
			border-radius: 20rpx;
		}
	}
	.cou-image-title{
		position: absolute;
		top: 44rpx;
		width: 100%;
		line-height: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}
	.cou-title{
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	.cou-tag{
		font-size: 22rpx;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		color: #fff;
		margin-right: 24rpx;
	}
	.cou-name-num{
		margin-top: 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		text{
			white-space: nowrap;
		}
		.teacher-name{
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	// 精彩评论
	.com-list{
		// width: 100%;
		// overflow-x: scroll;
	}
	.com-list-scroll{
		// width: 1000px;
		overflow-x: scroll;
		white-space: nowrap;
		overflow-x: scroll;
		
	}
	.pc-scroll{
		height: calc(265rpx + 5px);
		&:hover{
			&::-webkit-scrollbar {
				display: block;
				width: 5px;
				height: 5px;
			}

			&::-webkit-scrollbar-track-piece {
				background-color: transparent;
				border-radius: 6px;
				width: 0px;
				height: 0;
			}

			&::-webkit-scrollbar-thumb:horizontal {
				width: 5px;
				width: 5px;
				background-color: rgba(125, 125, 125, 0.5);
				border-radius: 6px;
			}
		}
		
	}
	.com-item{
		display: inline-block;
		margin-right: 24rpx;
		border-radius: 8rpx;
		min-width: 620rpx;
		width: 620rpx;
		height: 265rpx;
		padding: 26rpx;
		background-image: url(~@/static/campus/com-bg.png);
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;
		vertical-align: middle;
		&:last-child{
			margin-right: 0;
		}
		.info{
			display: flex;
			align-items: center;
		}
		.head{
			width: 44rpx;
			height: 44rpx;
			margin-right: 18rpx;
			border-radius: 22rpx;
		}
		.text{
			margin-top: 26rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 42rpx;
			height: 84rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: pre-line;
		}
	}
</style>